<template>
  <view class="container">
    <view class="bgwh pd_t_30" v-if="arr.id">
      <uCharts :scroll="arr.opts.enableScroll"
               :show="canvas"
               :canvasId="arr.id"
               :chartType="arr.chartType"
               :extraType="arr.extraType"
               :cWidth="cWidth"
               :cHeight="cHeight"
               :opts="arr.opts"
               :ref="arr.id"/>
    </view>
  </view>
</template>

<script>
import uCharts from './leiqch-ucharts/u-charts.vue'

export default {
  components: {uCharts},

  props: {
    datas: Object,
    width: Number,
    height: Number
  },

  data() {
    return {
      canvas: false,
      cWidth: '',
      cHeight: '',
      arr: {}
    }
  },

  methods: {
    init() {
      this.cWidth = uni.upx2px(this.width || 750);
      this.cHeight = uni.upx2px(this.height || 600);
    },

    initEcharts(res) {
      var categories = []
      var name = []
      res.data.forEach(item => {
        categories.push(item['年级'])
        name.push(item['name'])
      })
      categories = [...new Set(categories)]
      name = [...new Set(name)]
      var data = []
      name.forEach(item => {
        var obj = {}
        obj.name = item
        obj.data = []
        data.push(obj)
      })
      data.forEach(item => {
        categories.forEach((cate, index) => {
          let scroll = res.data.filter(itemScroll => {
            if (itemScroll['年级'] == cate && itemScroll['name'] == item.name) {
              return itemScroll
            }
          })
          if (scroll.length) {
            item.data[index] = scroll[0]['分数']
          } else {
            item.data[index] = 0
          }
        })
      })
      var serverData = {
        group: '商品房预（现）售供应情况分析',
        title: '兵团商品房预（现）售供应月度情况',
        opts: {
          categories: categories,
          enableScroll: false,
          series: data,
          unit: "分",
        },
        chartType: "line",
        extraType: "default",
        id: "c0"
      }
      this.arr = serverData;
      this.canvas = true
      this.init()
    }
  }
}
</script>

<style scoped lang="scss">
.fl-row { display: flex; flex-direction: row; }
.bgwh { background-color: #FFFFFF; }/*白色*/
.g6 { color: #666; }/*浅黑*/
.tc { text-align: center; }
.f30 { font-size: 30upx; }
.p10{ padding: 10upx; }
.mt10{margin-top: 10upx;}
.mb10{margin-bottom: 10upx;}
.ml10{margin-left: 10upx;}
.mr10{margin-right: 10upx;}

.qiun-title-bar{
  width:96%;
  padding:10upx 2%;
  flex-wrap:nowrap;
}

.container {
  box-sizing: border-box;
  height: 100%;
  background-color: #efeff4;
}

.content {
  width: 750upx;
  height: calc(100% - 100upx);
  background-color: #efeff4;
}
.title {
  line-height: 80upx;
  background-color: #eee;
  text-indent: 20upx;
  font-size: 30upx;
  color: #000000;
  letter-spacing: 1px;
}
.i-cube {
  width: 12upx;
  height: 60upx;
  background-color: #007AFF;
  margin-right: 20upx;
}

.s-btn {
  font-size: 28upx;
  background-color: transparent;
  color: #f6a121;
  line-height: 1.8;
  padding-left: 20upx;
  padding-right: 20upx;
}
.s-btn:after {
  border: 2upx solid #8799A3;
}
.s-btn-hover {
  background-color: #f6a121;
  color: #FFFFFF;
}

.s-btn1 {
  font-size: 28upx;
  background-color: transparent;
  color: #f6a121;
  line-height: 1.8;
  padding-left: 20upx;
  padding-right: 20upx;
}
.s-btn1:after {
  border: 2upx solid #8799A3;
}
.s-btn1-hover {
  background-color: #007AFF;
  color: #FFFFFF;
}
</style>
